<template>
  <div class="rank-container">
    <div class="title">
      <p>销量排行</p>
      <img src="../images/dataScreen-title.png" alt="" />
    </div>
    <div ref="chartContainer" class="rank-chart-container"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
let chartContainer = ref()
const option = {
  title: {
    text: '产品销量排行',
    left: '40%',
    textStyle: {
      color: 'aqua',
    },
  },
  xAxis: {
    show: true,
    alignTicks: true,
    splitLine: {
      show: false,
    },
  },
  yAxis: {
    splitLine: {
      show: false,
    },
    name: 'spu',
    alignTicks: false,
    type: 'category',
    data: ['小米', '华为', 'oppo', '格力', '海尔', '松下', '苹果'],
  },
  grid: {
    left: 40,
    bottom: 20,
    right: 20,
  },
  series: [
    {
      type: 'bar',
      data: [20, 50, 30, 40, 23, 48, 65],
      label: {
        show: true,
        color: 'lightcoral',
      },
      showBackground: true,
      backgroundStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'black', // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'blue', // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
      itemStyle: {
        borderRadius: [10, 10, 0, 0],
      },
    },
  ],
}
onMounted(() => {
  let myChart = echarts.init(chartContainer.value)
  myChart.setOption(option)
})
</script>

<style lang="scss" scoped>
.rank-container {
  // overflow: hidden;
  width: 100%;
  height: 100%;

  background: url('../images/dataScreen-main-cb.png') no-repeat;
  background-size: 100% 100%;

  .title {
    padding-left: 10px;
    p {
      color: #fff;
    }
  }
  .rank-chart-container {
    // margin-top: 20px;
    height: calc(100% - 50px);
  }
}
</style>
